<template>
	<view>
		<u-navbar :is-back="false" title="">
			<view class="slot-wrap">
				<view class="more-box">
					<image src="../../static/edit.png" @click="editPersonChange" mode=""></image>
				</view>
			</view>
		</u-navbar>
		<view class="main">
			<view class="user-info">
				<view class="left">
					<view class="name">百吉纳俱乐部</view>
					<view class="desc">简介：百吉纳俱乐部</view>
				</view>
				<view class="right">
					<image src="../../static/test.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="" style="display: flex;justify-content: center;position: relative;">
				<view class="Instrument-panel" v-if="JSON.stringify(income) != '{}'">
					<view class="wradht" @click="surePaypal">立即提现</view>
					<view class="top">今日收益</view>
					<view class="day-money">{{income.money_today}}</view>
					<view class="more">
						<view class="item">
							<view class="item-one">今日订单数</view>
							<view class="item-two">{{income.order_today}}单</view>
						</view>
						<view class="item">
							<view class="item-one">可提现收益</view>
							<view class="item-two">{{income.money}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="image">
				<image src="../../static/test.png" mode="aspectFill"></image>
			</view>
			<view class="tool">
				<view class="tool-text">工具</view>
				<u-grid :col="4">
					<u-grid-item v-for="item in option" @click="handleOption(item)" :key="item.path">
						<image class="icon" :src="item.icon" mode=""></image>
						<view class="grid-text">{{item.name}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app'
	import { postHttpsRequset } from '@/public-ts-file/request';
	let option = ref([
		{ name: '申请学院', path: '/pages/home/school/schoolCoach', icon: '../../static/xschool.png' },
		{ name: '管理助教', path: '/pages/home/mine/managementAssistant', icon: '../../static/user.png' },
		{ name: '客服中心', path: '', icon: '../../static/kf.png' },
		{ name: '帮助中心', path: '', icon: '../../static/help.png' },
		{ name: '退出登录', path: '', icon: '../../static/exit.png' }
	])

	// 收益统计
	interface TIncome {
		money_today : number,
		order_today : number,
		money : number
	}
	let income = ref<TIncome>({})
	const incomeStatistics = async () => {
		const parms = {
			path: '/shop/Moneydetail/money_statistics',
			methods: 'POST',
		}
		const res = await postHttpsRequset(parms)
		if (res.code == 200) {
			income.value = res.data
		}
	}

	onShow(() => {
		incomeStatistics()
	})

	const handleOption = (item) => {
		uni.navigateTo({
			url: item.path
		})
	}


	const editPersonChange = () => {
		uni.navigateTo({
			url: '/pages/home/editPerson'
		})
	}

	const surePaypal = () => uni.navigateTo({
		url: '/pages/home/surePaypal'
	})
</script>

<style lang="scss" scoped>
	.icon {
		width: 60rpx;
		height: 60rpx;
	}

	.main {
		padding: 0 30rpx;

		.user-info {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.right {
				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}

			.left {
				.name {
					opacity: 1;
					/** 文本1 */
					font-size: 14px;
					font-weight: 900;
					letter-spacing: 0px;
					line-height: 19.21px;
					color: rgba(51, 51, 51, 1);
					margin-bottom: 10rpx;
				}

				.desc {
					opacity: 1;
					/** 文本1 */
					font-size: 12px;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 16.46px;
					color: rgba(51, 51, 51, 1);
				}
			}
		}

		.Instrument-panel {

			.wradht {
				padding: 14rpx 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 132rpx;
				right: 0rpx;
				opacity: 1;
				color: white;
				font-size: 28rpx;
				border-radius: 8rpx;
				background: linear-gradient(148.9deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.01) 100%);
			}

			margin: 40rpx 0 28rpx 0;
			padding: 28rpx;
			left: 17px;
			top: 139px;
			width: 100%;
			opacity: 1;
			border-radius: 8px;
			background: linear-gradient(154.32deg, rgba(71, 89, 220, 1) 0%, rgba(71, 89, 220, 1) 100%);
			box-shadow: 0px 0px 2px rgba(123, 140, 227, 1);

			.top {
				opacity: 1;
				/** 文本1 */
				font-size: 12px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 16.46px;
				color: rgba(255, 255, 255, 1);
			}

			.day-money {
				opacity: 1;
				/** 文本1 */
				font-size: 28px;
				font-weight: 900;
				letter-spacing: 0px;
				line-height: 38.42px;
				color: rgba(255, 255, 255, 1);
				padding: 26rpx 0;
			}



			.more {
				width: 100%;
				display: flex;
				align-items: center;

				.item:first-child {
					margin-right: 194rpx;
				}

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.item-one {
						opacity: 1;
						/** 文本1 */
						font-size: 12px;
						font-weight: 400;
						letter-spacing: 0px;
						line-height: 16.46px;
						color: rgba(255, 255, 255, 1);
						margin-bottom: 12rpx;
					}

					.item-two {
						/** 文本1 */
						font-size: 20px;
						font-weight: 700;
						letter-spacing: 0px;
						line-height: 27.44px;
						color: rgba(255, 255, 255, 1);
					}
				}
			}
		}

		.image {
			image {
				border-radius: 20rpx;
				height: 232rpx;
				width: 692rpx;
			}
		}

		.tool {
			.grid-text {
				opacity: 1;
				/** 文本1 */
				font-size: 12px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 16.46px;
				color: rgba(102, 102, 102, 1);
			}

			.tool-text {
				opacity: 1;
				/** 文本1 */
				font-size: 16px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 21.95px;
				color: rgba(0, 0, 0, 1);
				padding: 14rpx 0 42rpx 30rpx;
			}
		}
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 1;

		.more-box {
			padding-right: 30rpx;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
</style>